<template>
  <div class="test-template">
    <div class="content content-left">
      <div class="top">
        <div>请输入测试 json ：</div>
        <a-button type="primary" @click="doCheck">执行</a-button>
      </div>
      <vue-json-editor
        style="flex: 1"
        v-model="jsonData"
        :showBtns="false"
        :mode="'code'"
        lang="zh"/>
    </div>
    <div class="content content-right">
      <div class="top">测试结果：</div>
      <div class="result-box">
        <div class="item" :class="{'item-col': form.widthPercent}" v-for="form in result" :key="form.formDTO.id" :style ="{'width': form.widthPercent ? form.widthPercent + '%' : '100%', 'height': form.formDTO.showHeight ? form.formDTO.showHeight : 'auto'}">
          <div class="name">
            <div class="main-name">
              <div v-show="form.formDTO.icon" class="box-icon" :class="form.formDTO.icon"></div>
              {{form.formDTO.formName}}
            </div>
            <div v-show="form.formDTO.formName !== form.formDTO.formNick" class="nick">
              <div class="nick-icon"></div>
              {{form.formDTO.formNick}}
            </div>
          </div>
          <div class="content">
            <div class="title">
              字段长度检测
              <div v-show="!form.limitLengthList.length && !form.limitXsdList.length" class="success-icon"></div>
              <div v-show="form.limitLengthList.length || form.limitXsdList.length" class="error-icon"></div>
            </div>
            <div v-for="field in form.limitLengthList" :key="field.id">
              <span class="color-red">【{{field.fieldNick}}】</span>字段长度超过最大长度{{field.limitLength}}，请检查！！
            </div>
            <div v-for="field in form.limitXsdList" :key="field.id">
              <span class="color-red">【{{field.fieldNick}}】</span>小数位数超过{{field.limitLength.slice(-1)}}位，请检查！！
            </div>
            <div class="title" style="padding-top: 10px">
              字段必填检测
              <div v-show="!form.showScyjRequired && !form.normalRequiredList.length && !form.customRequiredList.length" class="success-icon"></div>
              <div v-show="form.showScyjRequired || form.normalRequiredList.length || form.customRequiredList.length" class="error-icon"></div>
            </div>
            <div style="padding-left: 40px">
              <div v-if="form.showScyjRequired"><span class="color-red">审查意见未填写，</span>请检查！！</div>
              <span v-for="(field,index) in form.normalRequiredList" :key="field.id">
                <span class="color-red"><span v-if="index > 1">、</span>【{{field.fieldNick}}】</span>
              </span>
              <span v-if="form.normalRequiredList.length">必填字段未填写，请检查！！</span>
            </div>
            <div style="padding-left: 40px">
              <div v-for="field in form.customRequiredList" :key="field.fieldNick">
                <span class="color-red">【{{field.fieldNick}}】</span>{{field.requiredDesc}}
              </div>
            </div>
            <div class="title" style="padding-top: 10px">
              业务规则检测
              <div v-show="!form.customScriptList.length" class="success-icon"></div>
              <div v-show="form.customScriptList.length" class="error-icon"></div>
            </div>
            <div style="padding-left: 40px">
              <div v-for="msg in form.customScriptList" :key="msg" v-html="msg"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import vueJsonEditor from 'vue-json-editor'
  import dataQualityInspectionService from '@/api/dataQualityInspectionService'
export default {
  name: 'testTemplateDialog',
  components: { vueJsonEditor },
  data () {
    return {
      jsonData: null,
      result: []
    }
  },
  props: {
    configName: {
      type: String,
      default: ''
    }
  },
  methods: {
    async doCheck () {
      if (this.jsonData) {
        const params = {
          configName: this.configName
        }
        const res = await dataQualityInspectionService.startCheck(params, JSON.stringify(this.jsonData))
        const colFromInfo = {}
        let colNumber = 0
        res.forEach((form, index) => {
          form.limitLengthList = []
          form.limitXsdList = []
          form.normalRequiredList = []
          form.customRequiredList = []
          form.customScriptList = []
          form.showScyjRequired = false
          form.itemList.forEach(field => {
            field.chainResult.forEach(chain => {
              // 字段长度检测
              if (chain.chainName === 'limit' && chain.result === false) {
                const item = {
                  fieldNick: field.formItemDTO.fieldNick,
                  limitLength: field.formItemDTO.limitLength
                }
                if (chain.message.includes('最大长度')) {
                  // 超过最大长度
                  form.limitLengthList.push(item)
                } else {
                  // 小数点位数超过限制
                  form.limitXsdList.push(item)
                }
              }
              // 字段必填检测
              if (chain.chainName === 'required' && chain.result === false) {
                if (field.formItemDTO.requiredDesc && field.formItemDTO.requiredDesc.trim()) {
                  form.customRequiredList.push({
                    fieldNick: field.formItemDTO.fieldNick,
                    requiredDesc: field.formItemDTO.requiredDesc
                  })
                } else if (field.tableName === 'bz_scyjxx' && field.fieldName === 'scyj') {
                  form.showScyjRequired = true
                } else {
                  form.normalRequiredList.push({
                    fieldNick: field.formItemDTO.fieldNick
                  })
                }
              }
              // 自定义脚本校验
              if (chain.chainName === 'script' && chain.result === false) {
                chain.childResult.forEach(childRes => {
                  if (childRes.result === false) {
                    form.customScriptList.push(childRes.message)
                  }
                })
              }
            })
          })
          // 纵向处理
          if (form.formDTO.direction === 'col') {
            if (res[index - 1].formDTO.direction !== 'col') {
              // 每一行纵向排列的表单生成一个新数组
              colNumber++
              colFromInfo[colNumber] = [index]
            } else if (colFromInfo[colNumber].slice(-1)[0] + 1 === index) {
              // 连续的索引放到同一个数组中
              colFromInfo[colNumber].push(index)
            }
          }
        })
        Object.keys(colFromInfo).forEach(key => {
          let showHeight = ''
          colFromInfo[key].forEach(index => {
            if (res[index].formDTO.showHeight) {
              showHeight = res[index].formDTO.showHeight
            }
            if (showHeight) {
              res[index].formDTO.showHeight = showHeight
            }
            res[index].widthPercent = 100 / (colFromInfo[key].length)
          })
        })
        this.result = res || []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.test-template{
  height: 70vh;
  display: flex;
  .color-red{
    color: #ff4d4f;
  }
  .content{
    width: 50%;
    height: 100%;
    overflow-y: auto;
    .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }
  .content-left{
    border-right: 1px solid #d6d9dc;
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    /deep/.jsoneditor-vue{
      height: 100%;
    }
  }
  .content-right{
    height: 100%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    .result-box{
      width: 100%;
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      .item{
        width: 100%;
        display: flex;
        border: 1px solid #d6d9dc;
        min-height: 80px;
        flex: none;
        .name{
          width: 25%;
          border-right: 1px solid #d6d9dc;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 5px;
          overflow-y: auto;
          .main-name{
            display: flex;
            align-items: center;
          }
          .nick{
            display: flex;
            align-items: center;
            .nick-icon{
              align-self: start;
              flex: none;
              width: 20px;
              height: 20px;
              background-image: url("../../../../assets/img/sjzj/nick-icon.png");
              background-size: 100% 100%;
              position: relative;
              top: 3px;
              margin-right: 3px;
            }
          }
        }
        .content{
          flex: 1;
          padding: 5px;
          overflow-y: auto;
          .title{
            color: #2BAEF2;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
          }
        }
      }
      .item-col{
        flex-direction: column;
        .name{
          padding: 15px 0;
          width: 100%;
          border-right: none;
        }
        .content{
          width: 100%;
        }
      }
      .success-icon{
        width: 20px;
        height: 20px;
        background-image: url("../../../../assets/img/sjzj/success-icon.png");
        background-size: 100% 100%;
        margin-left: 5px;
      }
      .error-icon{
        width: 17px;
        height: 17px;
        background-image: url("../../../../assets/img/sjzj/error-icon.png");
        background-size: 100% 100%;
        margin-left: 5px;
      }
      .box-icon{
        width: 20px;
        height: 20px;
        margin-right: 5px;
        background-size: 100% 100%;
      }
      .jsdkqd-icon{
        background-image: url("../../../../assets/img/sjzj/jsdkqd-icon.png");
      }
      .jzgc-icon{
        background-image: url("../../../../assets/img/sjzj/jzgc-icon.png");
      }
      .scyj-icon{
        background-image: url("../../../../assets/img/sjzj/scyj-icon.png");
      }
      .xkfqx-icon{
        background-image: url("../../../../assets/img/sjzj/xkfqx-icon.png");
      }
      .xmxx-icon{
        background-image: url("../../../../assets/img/sjzj/xmxx-icon.png");
      }
      .ydgh-icon{
        background-image: url("../../../../assets/img/sjzj/ydgh-icon.png");
      }
      .ydgm-icon{
        background-image: url("../../../../assets/img/sjzj/ydgm-icon.png");
      }
      .zsxx-icon{
        background-image: url("../../../../assets/img/sjzj/zsxx-icon.png");
      }
      .gxgc-icon{
        background-image: url("../../../../assets/img/sjzj/gxgc-icon.png");
      }
      .jtgc-icon{
        background-image: url("../../../../assets/img/sjzj/jtgc-icon.png");
      }
      .qtgc-icon{
        background-image: url("../../../../assets/img/sjzj/qtgc-icon.png");
      }
    }
  }
}
</style>
